<template>
    <div class="box">
        <div class="title">近七天获奖人数</div>
        <v-chart :option="option" autoresize class="charts"></v-chart>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    props: ["data", "time"],
    watch: {
        data: {
            deep: true,
            immediate: true,
            handler() {
                this.option.series[0].data = this.data[0]
                this.option.series[1].data = this.data[1]
                this.option.series[2].data = this.data[2]
                this.option.series[3].data = this.data[3]

            }
        },
        time: {
            deep: true,
            immediate: true,
            handler() {
                this.option.xAxis.data = this.time
            }
        }
    },
    data() {
        return {
            option: {
                legend: {
                    data: ['一等奖', '二等奖', '三等奖', '四等奖'],
                    right: "10%",
                    top: "6%",

                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号'],
                    data: [],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '一等奖',
                        type: 'line',
                        // data: [220, 182, 191, 234, 290, 330, 310],
                        data: [],
                        smooth: true,
                        color: "rgb(222,45,104)",
                        lineStyle: {
                            color: 'rgb(222,45,104)'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: 'rgb(225,255,255,.1)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(222,45,104,.3)'
                                },

                            ])
                        },
                    },
                    {
                        name: '二等奖',
                        type: 'line',
                        // data: [150, 232, 201, 154, 190, 330, 410],
                        data: [],

                        smooth: true,
                        color: "#16A0E8",
                        lineStyle: {
                            color: '#16A0E8'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: 'rgb(225,255,255,.1)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(22,160,232,.23)'
                                },

                            ])
                        },
                    },
                    {
                        name: '三等奖',
                        type: 'line',
                        // data: [320, 332, 301, 334, 390, 330, 320],
                        data: [],

                        smooth: true,
                        color: "#00A69F",
                        lineStyle: {
                            color: '#00A69F'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: 'rgb(225,255,255,.1)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(0,166,159,.23)'
                                },

                            ])
                        },
                    },
                    {
                        name: '四等奖',
                        type: 'line',
                        // data: [820, 932, 901, 934, 1290, 1330, 1320],
                        data: [],

                        smooth: true,
                        color: "#CC8600",
                        lineStyle: {
                            color: '#CC8600'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 1,
                                    color: 'rgb(225,255,255,.1)'
                                },
                                {
                                    offset: 0,
                                    color: 'rgba(204,134,0,.23)'
                                },

                            ])
                        },
                    }
                ]
            }
        }
    },
    mounted() {
        this.option.series[0].data = this.data[0]
        this.option.series[1].data = this.data[1]
        this.option.series[2].data = this.data[2]
        this.option.series[3].data = this.data[3]
        this.option.xAxis.data = this.time


    }
}
</script>

<style  scoped>
.box {
    width: 100%;
    height: 28.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin-top: 1.5rem;
    position: relative;
}
.title {
    width: 100%;
    font-size: 1.8rem;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #222222;
    margin: 1.5rem 0 0 1.4rem;
    flex-shrink: 0;
    position: absolute;
}
.charts {
    width: 100%;
    height: 100%;
}
</style>
